import { createStore } from "vuex";
import axios from "axios";

const store = createStore({
  state() {
    return {
      sellerIofo: {}, // 商家头部数据
      goods: [], //商家列表数据
      show: false, //是否展示购物车列表
      carList: [], //购物车列表数据
      price: 0, // 总价
      img: ["../../../img/12.png", "../../../img/11.jpg"],
      imgsrc: "../../../img/12.png",
    };
  },
  getters: {},
  mutations: {
    // 接口获取数据，更新商家头部数据，提供给页面使用
    setSeller(state, payload) {
      state.sellerIofo = payload.data;
    },
    // 接口获取数据，更新商家列表数据，提供给页面使用
    setGoods(state, payload) {
      state.goods = payload.data;
    },

    setRating(state, payload) {
      state.ratings = payload.data;
    },
    // 更新购物车是否展示状态
    showCar(state) {
      state.show = !state.show;
    },

    // 更新购物车列表数组，要先检测
    // 通过添加按钮传过来的数据，我们先检测，购物车列表中是否已经存在，
    // 如果存在则不再添加
    // 如果不存在则push进去
    setCarList(state, payload) {
      // findIndex 满足条件 则 返回对应的列表项下标
      // 如果不满足 ，则返回-1，说明购物车列表中不存在这个对象
      const hasItem = state.carList.findIndex((item) => {
        // 购物车列表中对象的名字，是否等于按钮传过来的对象名字
        return item.name == payload.item.name;
      });
      // 如果购物车列表中没有这类需要加的商品，则可以在购物车中追加商品
      if (hasItem == "-1") {
        // 向carList追加商品
        state.carList.push(payload.item);
      }
      // 购物车图标的初始状态
      // 购物车里面有商品则图标亮
      state.imgsrc = state.img[1];
    },
    // 购物车的删除效果
    // findIndex满足条件，则返回对应的列表下标

    delete(state, payload) {
      const index = state.carList.findIndex((item) => {
        return item.name == payload.item.name;
      });
      // 如果不满足则返回-1
      // index的值不为-1，则证明找到了对应需要的删除的商品，执行删除操作
      if (index !== -1) {
        state.carList.splice(index, 1);
      }
      // 如果购物车里面的商品为0，则图标变灰色
      // 方法是判断carList数组的长度是否为0
      if (state.carList.length === 0) {
        state.imgsrc = state.img[0];
      }
    },
    // 清空购物车操作
    qing(state) {
      // 如果count为0，则表示carList没有数据即购物车为空
      state.carList.forEach((item) => {
        item.count = 0;
      });
      // 则给carList赋空值
      state.carList = [];
      // 遮罩层不显示
      state.show = false;
      // 购物车图标变为灰色
      state.imgsrc = state.img[0];
    },
  },
  actions: {
    // 获取商家列表数据
    async getGoods({ commit }) {
      const {
        data: { data },
      } = await axios.get("/api/goods");
      commit("setGoods", { data });
      console.log(data);
    },
    // commit提交事件，触发执行mutations里面的setSeller函数，传递的参数是以对象的形式传递
    async getSeller({ commit }) {
      // 获取商家头部数据
      const {
        data: { data },
      } = await axios.get("/api/seller");

      commit("setSeller", { data });
      // console.log(data);
    },
    async getRating({ commit }) {
      // 获取商家头部数据
      const {
        data: { data },
      } = await axios.get("/api/ratings");
      commit("setRating", { data });
      console.log(data);
    },
  },
});
// 导出store仓库
export default store;
